<template>
  <el-card class="m-8">

    <p class="text-xl font-semibold mb-8">用户发布蒲公英种子</p>

    <section class="flex items-center mb-4">
      <p class="w-64 text-lg text-right mr-8">单条消息每隔(秒数)广播一次</p>
      <el-input-number v-model="pullConfig.push_interval_second" :min="0"></el-input-number>
    </section>

    <section class="flex items-center mb-4">
      <p class="w-64 text-lg text-right mr-8">单条消息每次推广人数</p>
      <el-input-number v-model="pullConfig.single_user_count" :min="0"></el-input-number>
    </section>

    <section class="flex items-center mb-4">
      <p class="w-64 text-lg text-right mr-8">单条消息推送男女比例</p>
      <el-input-number v-model="pullConfig.single_gender_rate" :max="100" :min="0" class="mr-4"></el-input-number>
      <p class="text-red-600"> % 🚀🚀🚀 请输入0-100之间的整数</p>
    </section>

    <section class="flex items-center mb-4">
      <p class="w-64 text-lg text-right mr-8">推送次数</p>
      <el-input-number v-model="pullConfig.push_count" :min="0"></el-input-number>
    </section>

    <section class="flex items-center mb-4">
      <p class="w-64 text-lg text-right mr-8">失效时长</p>
      <el-input-number v-model="pullConfig.expire_second" :min="0"></el-input-number>
    </section>

    <section class="flex items-center mb-4">
      <p class="w-64 text-lg text-right mr-8">拉取缓冲时间</p>
      <el-input-number v-model="pullConfig.pull_buffer_second" :min="0"></el-input-number>
    </section>

    <section class="flex items-center mb-4">
      <p class="w-64 text-lg text-right mr-8">拉取回复数量大于该值的蒲公英</p>
      <el-input-number v-model="pullConfig.pull_reply_count" :min="0"></el-input-number>
    </section>

    <section class="flex items-center mb-4">
      <p class="w-64 text-lg text-right mr-8">是否使用性别比例</p>
      <el-radio-group v-model="pullConfig.use_gender_rate">
        <el-radio-button :label="1">使用</el-radio-button>
        <el-radio-button :label="0">不使用</el-radio-button>
      </el-radio-group>
    </section>

    <section class="flex items-center mb-4">
      <p class="w-64 text-lg text-right mr-8">推送开关</p>
      <el-radio-group v-model="pullConfig.is_visible">
        <el-radio-button :label="1">开启</el-radio-button>
        <el-radio-button :label="0">不开启</el-radio-button>
      </el-radio-group>
    </section>

    <section class="pl-72 my-8">
      <el-popconfirm title="是否保存配置" @confirm="handleSavePullConfig">
        <el-button slot="reference" plain type="primary">保存</el-button>
      </el-popconfirm>

    </section>

    <section class="flex items-center mb-4">
      <p class="w-64 text-lg text-right mr-8">必推用户（额外推送）</p>
      <el-input v-model="userList" class="mr-4" type="textarea"/>
      <p class="text-red-600">🚀🚀🚀 每个用户编号之间使用空格(数量不限制)分开</p>
    </section>

    <section class="pl-72 my-8">
      <el-popconfirm title="是否保存配置" @confirm="handleSaveTargetConfig">
        <el-button slot="reference" plain type="primary">保存</el-button>
      </el-popconfirm>
    </section>

    <p class="text-xl font-semibold mb-8">用户获取蒲公英种子</p>

    <section class="flex items-center mb-4">
      <p class="w-64 text-lg text-right mr-8">单个用户每日接收数量</p>
      <el-input-number v-model="target.count" :min="0"></el-input-number>
    </section>

    <section class="flex items-center mb-4">
      <p class="w-64 text-lg text-right mr-8">回复是否影响接收数量</p>
      <el-radio-group v-model="target.is_reply">
        <el-radio-button :label="1">影响</el-radio-button>
        <el-radio-button :label="0">不影响</el-radio-button>
      </el-radio-group>
    </section>

    <section class="flex items-center mb-4">
      <p class="w-64 text-lg text-right mr-8">是否开启</p>
      <el-radio-group v-model="target.is_visible">
        <el-radio-button :label="1">开启</el-radio-button>
        <el-radio-button :label="0">不开启</el-radio-button>
      </el-radio-group>
    </section>

    <section class="pl-72 mt-8">
      <el-popconfirm title="是否保存配置" @confirm="handleSaveLastConfig">
        <el-button slot="reference" plain type="primary">保存</el-button>
      </el-popconfirm>

    </section>

  </el-card>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'index',
  data() {
    return {
      pullConfig: {
        single_user_count: 0,
        single_gender_rate: 0,
        push_count: 0,
        push_interval_second: 0,
        expire_second: 0,
        pull_buffer_second: 0,
        pull_reply_count: 0,
        use_gender_rate: 1,
        /* 1 开 0 关 */
        is_visible: 1
      },
      target: {
        count: 0,
        is_reply: 0,
        /* 1 开 0 关 */
        is_visible: 1
      },
      /*
      * 必推用户列表
      * */
      userList: ''

    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      const { data: { data } } = await request('/dandelion/push/config')
      const { data: { data: target } } = await request('/dandelion/target/config')
      this.pullConfig = data[0]
      this.target = target[0]
    },

    async handleSavePullConfig() {
      const id = this.pullConfig.id
      try {
        await request({
          url: `/dandelion/push/config/${id}`,
          method: 'put',
          data: this.pullConfig
        })
        this.$message.success('数据更新成功！')
        await this.initData()
      } catch (e) {

      }
    },

    async handleSaveTargetConfig() {
      try {
        let __userList = ''
        if (this.userList.trim() === '') {
          return this.$message.warning('请输入用户id后保存配置')
        } else {
          __userList = this.userList.split(' ').filter(item => item !== '').join(',')
        }

        await request({
          url: '/dandelion/special/user',
          method: 'post',
          data: {
            type: 'target',
            user_code: __userList
          }
        })
        this.$message.success('数据更新成功！')
      } catch (e) {

      }
    },

    async handleSaveLastConfig() {
      const id = this.target.id
      try {
        const { count, is_visible, is_reply } = this.target

        await request({
          url: `/dandelion/target/config/${id}`,
          method: 'put',
          params: { count, is_reply, is_visible }
        })

        this.$message.success('数据更新成功！')
        await this.initData()
      } catch (e) {

      }

    }

  }

}
</script>

<style scoped>
.el-textarea {
  width : 300px;
}
</style>
